fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1384
Merged
kirillzyusko merged 1 commit intokirillzyusko:mainfrom Mar 20, 2026
Conversation
Contributor
Author
|
@kirillzyusko Sorry for the mess, I had to close that other PR and open a new one. I asked antigravity to correct the style in the PR and he made a huge mess of it. I had to create the PR by hand, the old-fashioned way, lol. And sorry for the delay, I was busy at work. |
kirillzyusko
approved these changes
Mar 20, 2026
Contributor
📊 Package size report
|
Owner
|
Thank you for the contribution! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
When using
KeyboardAwareScrollViewinside a wrapper that sizes itself to its content (e.g., a Modal or Bottom Sheet without an explicit height constraint), the scroll view completely collapses to height0.This occurs because
ReanimatedClippingScrollViewwithinScrollViewWithBottomPaddingapplies a hardcodedflex: 1style. In React Native's Yoga layout engine, aflex: 1(which acts asflexBasis: 0) child placed inside an unconstrained, self-sizing parent computes its available space as0.By substituting
flex: 1withflexGrow: 1andflexShrink: 1, the layout maintains full backward compatibility for standard full-screen usages (it still stretches to fill an available Flex container) but gracefully falls back to its intrinsic content height when placed inside an auto-sizing wrapper.Steps to Reproduce
Render
KeyboardAwareScrollViewinside aViewthat lacks absolute constraints or explicit flex stretching:Version 1.21.1
Expected behavior
KeyboardAwareScrollViewshould accurately compute its size based on its children's intrinsic content height when the parentViewis dynamically sizing itself.Actual behavior
The component shrinks to a bounding box of height
0because of the forcedflex: 1container style, making forms invisible inside auto-sized elements like custom Modals.Solution
Replaced
flex: 1with{ flexGrow: 1, flexShrink: 1 }insidesrc/components/ScrollViewWithBottomPadding/styles.ts. This effectively gives the container aflexBasis: 'auto', which solves the collapsing sequence.Simulation
Before
After